import { DirectiveBinding } from 'vue'
import { Permission } from '@/config/index'
import { ElMessage } from 'element-plus'
interface DebounceElementType {
  _keyups: () => void
  _clicks: () => void
}
type DeElement = HTMLElement & DebounceElementType
// 防抖指令 v-debounce
const debounce = {
  mounted: function (el: DeElement, binding: DirectiveBinding) {
    let timer: NodeJS.Timeout
    // 监视键盘事件
    el._keyups = () => {
      if (timer) {
        clearTimeout(timer)
      }
      timer = setTimeout(() => {
        binding.value()
      }, 200)
    }
    el.addEventListener('keyup', el._keyups)
    // 监视点击事件
    el._clicks = () => {
      if (timer) {
        clearTimeout(timer)
      }
      timer = setTimeout(() => {
        binding.value()
      }, 200)
    }
    el.addEventListener('click', el._clicks)
  },
  unmounted(el: DeElement) {
    el.removeEventListener('click', el._clicks)
    el.removeEventListener('keyup', el._keyups)
  },
}
// 权限指令 v-permission
function checkArray(key: string) {
  const arr = Permission // 权限数组
  const index = arr.includes(key)
  return index ? true : false
}

const permission = {
  mounted: function (el: HTMLElement, binding: DirectiveBinding) {
    const permission = binding.value // 获取到 v-permission的值
    if (permission) {
      const hasPermission = checkArray(permission)
      if (!hasPermission) {
        // 没有权限 移除Dom元素
        el.parentNode && el.parentNode.removeChild(el)
      }
    }
  },
}
// 拖拽指令 v-draggable 注意元素必须为绝对定位才可用
const draggable = {
  mounted: function (el: HTMLElement) {
    el.style.cursor = 'move'
    el.onmousedown = function (e) {
      console.log('触发了')
      const disx = e.pageX - el.offsetLeft
      const disy = e.pageY - el.offsetTop
      document.onmousemove = function (e) {
        let x = e.pageX - disx
        let y = e.pageY - disy
        const maxX = document.body.clientWidth - parseInt(window.getComputedStyle(el).width)
        const maxY = document.body.clientHeight - parseInt(window.getComputedStyle(el).height)
        if (x < 0) {
          x = 0
        } else if (x > maxX) {
          x = maxX
        }
        if (y < 0) {
          y = 0
        } else if (y > maxY) {
          y = maxY
        }

        el.style.left = x + 'px'
        el.style.top = y + 'px'
      }
      document.onmouseup = function () {
        document.onmousemove = document.onmouseup = null
      }
    }
  },
}
// 复制指令 v-copy
const copy = {
  beforeMount(el: DeElement) {
    let timer: NodeJS.Timeout
    el._clicks = () => {
      if (timer) {
        clearTimeout(timer)
      }
      timer = setTimeout(() => {
        const text = el.innerText
        if (text) {
          navigator.clipboard
            .writeText(text)
            .then(() => {
              ElMessage({
                showClose: true,
                message: 'SvgIcon组件类名复制成功!',
                type: 'success',
              })
            })
            .catch(() => {
              ElMessage({
                showClose: true,
                message: '复制失败,Dom可能为null!',
                type: 'error',
              })
            })
        } else {
          ElMessage({
            showClose: true,
            message: '复制失败,Dom可能为null!',
            type: 'error',
          })
        }
      }, 200)
    }
    el.addEventListener('click', el._clicks)
  },
  unmounted(el: DeElement) {
    el.removeEventListener('click', el._clicks)
  },
}

export default {
  debounce,
  permission,
  draggable,
  copy,
}
